<template>
  <div class="app">
    <div class="p-2 border-bottom pb-0">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small " label-width="100px">
        <el-form-item label="姓名/电话/手机号" label-width="120px">
          <el-input v-model="formInline.user" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="多学员">
          <el-input v-model="formInline.user" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="校区">
          <el-select v-model="formInline.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="报名点">
          <el-select v-model="formInline.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="招生部门">
          <el-select v-model="formInline.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="报名时间" label-width="120px">
          <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="截止报名时间">
          <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="训练场">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

        <el-form-item label="申领类型">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
        
            <el-form-item label="班型">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>


        <el-form-item label=" " label-width="20px">
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="p-1 px-2 mt-1" style="height: 630px;">
      <div class="mb-1">
        <el-button type="primary" size="small">+ 新增</el-button>
        <el-button type="info" plain size="small" icon="el-icon-download">配置</el-button>
        <el-button type="info" plain size="small" icon="el-icon-video-play">初始化数据</el-button>
      </div>

      <el-table :data="tableData" border height="100%">
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="id" label="ID" width="80" align="center">
        </el-table-column>
        <el-table-column prop="name" label="班主任名称" width="180" align="center">
        </el-table-column>
        <el-table-column prop="realName" label="员工姓名" width="180" align="center">
        </el-table-column>
        <el-table-column prop="tel" label="班主任电话" width="120" align="center">
        </el-table-column>
        <el-table-column prop="studentNumMax" label="最大服务人数" width="120" align="center">
        </el-table-column>
        <el-table-column prop="studentNumCurrent" label="当前服务人数" width="120" align="center">
        </el-table-column>
        <el-table-column prop="firstper" label="建立人" width="180" align="center">
        </el-table-column>

        <el-table-column prop="firsttime" label="建立日期" width="250" align="center">
        </el-table-column>
        <el-table-column prop="editer" label="修改人" align="center" width="180">
        </el-table-column>

        <el-table-column prop="edittime" label="修改时间" align="center" width="250">
        </el-table-column>

        <el-table-column prop="enabled" label="是否在职" align="center" width="120">
          <template slot-scope="scope">
            {{ scope.row.enabled ? "在职" : "已离职" }}
          </template>
        </el-table-column>
        <el-table-column prop="address" width="180" label="操作" align="center" fixed="right">
          <el-button type="primary" plain size="mini">编辑</el-button>
          <el-button type="danger" plain size="mini" class="el-icon-delete">删除</el-button>
        </el-table-column>
      </el-table>

    </div>
    <!-- 分页 -->
    <div class="pagin px-2">
      <el-pagination background :current-page="initParams.page" :page-sizes="[20, 50, 100, 150]"
        :page-size="initParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
/**
* @author        ChenRong
* @time          2023-11-29 09:07:13  星期三
* @description   学员分配
**/


import { teacherAPI } from '@/api/adminstare'
export default {
  name: 'teachConfig',
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      // 初始化参数
      initParams: {
        action: "assignList",
        page: 1,
        pageSize: 20,
        isAssign: 1,
        isExactQuery: 0,
        sortStr: "id desc",
      },
      // 分页总条数
      total: 0,
    }
  },
  mounted() {
    this.getListData()
  },
  methods: {
    async getListData() {
      const result = await teacherAPI(this.initParams)
      console.log(result);

      
      this.total = result.total
      this.tableData = result.data
    },
    // 当前显示的条数 发生改变时触发
    handleSizeChange(pageSize) {
      this.initParams.pageSize = pageSize || 20
      this.getListData()
    },
    // 当前页码发生改变时触发
    handleCurrentChange(page) {
      this.initParams.page = page || 1
      this.getListData()
    },
  }
}
</script>

<style lang="scss" scoped>
.app {
  background-color: white;
  width: 100%;
  height: 100%;
}

.pagin {
  margin-top: 30px;
  // height: 80px;
  align-items: center;
}
</style>